<template>
  <div class="dialog">
    <el-dialog :title="titleText" :visible.sync="showDialog" width="45%" top="0" :close-on-click-modal="false" @close="cancel">
      <el-form ref="ruleForm" label-position="left" :model="formData" :rules="rules" class="el-form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位名称:" prop="manufacturingName" class="w100p">
              <el-input v-model="formData.manufacturingName" clearable placeholder="请输入单位名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人:" prop="legalBody" class="w100p">
              <el-input v-model="formData.legalBody" clearable placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话:" prop="tel" class="w100p">
              <el-input v-model="formData.tel" clearable placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加工产品:" prop="materialNoList" class="w100p">
              <el-select v-model="formData.materialNoList" placeholder="请选择" multiple>
                <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="单位地址:" prop="address" class="w100p">
              <el-input v-model="formData.address" clearable placeholder="请输入单位地址" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
                <el-form-item
                    label="已添加产品:"
                    prop="equipmentName4"
                    class="w100p"
                    >
                    <template v-for="item in devs">
                        <el-tag style="margin-right: 12px;">{{item}}</el-tag>
                    </template>
                </el-form-item>
          </el-col>-->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default: () => []
    },
    formDataCopy: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showDialog: this.show,
      // 展示
      formData: {},
      pictureList: [],
      rules: {
        manufacturingName: [
          {
            required: true,
            message: '请输入单位名称',
            trigger: ['change', 'blur']
          }
        ],
        tel: [{ validator: this.validateTel, trigger: 'blur' }]
      }
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
      if (!v) {
        setTimeout(() => {
          this.formData = {};
          this.$refs.ruleForm.resetFields();
        }, 250);
      }
    },
    formDataCopy(v) {
      this.formData = v;
      let list = [];
      v.materialList.forEach(element => {
        list.push(element.materialNo);
      });
      this.$set(this.formData, 'materialNoList', list);
    }
  },
  created() {},
  mounted() {},
  methods: {
    validateTel(_, value, callback) {
      const telPattern = /^[1][3-9][0-9]{9}$/; // 这是一个简单的中国大陆手机号格式，实际根据需要可以调整
      if (!value) {
        callback();
      } else if (!telPattern.test(value)) {
        callback(new Error('请输入有效的联系电话'));
      } else {
        callback();
      }
    },
    //   addMaterialItem(){
    //     this.formData.
    //   },
    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          console.log(this.formData);
          this.$emit('addEvent', this.formData);
          this.close();
        }
      });
    },
    close() {
      this.$emit('closeDialog');
    },
    cancel() {
      this.$emit('closeDialog');
      this.formData = {};
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__wrapper .el-dialog .el-dialog__body .el-form .el-form-item .el-form-item__label {
  min-width: 160px !important;
}
::v-deep .el-row {
  margin-bottom: 22px !important;
}
</style>
